<template>
  <view class="login">
    <div class="bg">
      <u--image class="img" src="/static/images/bg.png" width="100vw" height="100vh" alt="" />
    </div>
    <view class="loginTxt"> 订单录入系统 </view>
    <view class="formClass">
      <u--form labelPosition="left" :model="loginModel" :rules="rules" ref="loginForm">
        <u-form-item label="" prop="userInfo.username" borderBottom ref="username">
          <u--input v-model="loginModel.userInfo.username" prefixIcon="account" border="none" prefixIconStyle="font-size: 22px;color: #909399" />
        </u-form-item>
        <u-form-item label="" prop="userInfo.password" borderBottom ref="password" class="mt14">
          <u--input v-model="loginModel.userInfo.password" prefixIcon="lock" border="none" type="password" prefixIconStyle="font-size: 22px;color: #909399" />
        </u-form-item>
      </u--form>
      <view class="btn">
        <u-button type="primary" text="登 录" @click="mpLogin"></u-button>
      </view>
    </view>
    <view class="bottom-bg">
      <u--image class="img" src="/static/images/login-bottom.png" width="100vw" alt="" />
    </view>
  </view>
</template>
<script>
import { login } from '../../config/api';
export default {
  data() {
    return {
      rules: {},
      loginModel: {
        userInfo: {
          username: '',
          password: ''
        }
      }
    };
  },
  onLoad(option) {
    this.loginModel.userInfo.username = uni.getStorageSync('username');
    this.loginModel.userInfo.password = uni.getStorageSync('password');
    if (this.loginModel.userInfo.username && this.loginModel.userInfo.password) {
      this.mpLogin();
    }
  },
  methods: {
    async mpLogin() {
      if (this.loginModel.userInfo.username === '' || this.loginModel.userInfo.username === null || this.loginModel.userInfo.username === undefined || this.loginModel.userInfo.password === '' || this.loginModel.userInfo.password === null || this.loginModel.userInfo.password === undefined) {
        uni.showToast({
          title: '账号密码不能为空',
          icon: 'none',
          duration: 3000
        });
        return;
      }
      await login({
        username: this.loginModel.userInfo.username,
        password: this.loginModel.userInfo.password
      }).then(res => {
        if (res.data.code == 200 && res.data.data) {
          uni.setStorageSync('username', this.loginModel.userInfo.username);
          uni.setStorageSync('password', this.loginModel.userInfo.password);
          uni.reLaunch({ url: '/pages/home/orderList' });
        } else {
          uni.showToast({
            title: '账号或密码错误',
            icon: 'none',
            duration: 3000
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  width: 100%;
  position: relative;
  .welcome {
    font-size: 70px;
    color: white;
    text-align: center;
    position: absolute;
    top: 150px;
    left: 0;
    height: 100px;
    width: 100%;
  }
  .loginTxt {
    font-size: 30px;
    color: white;
    text-align: center;
    position: absolute;
    top: 240px;
    left: 0;
    height: 100px;
    width: 100%;
  }
  .formClass {
    top: 290px;
    left: 0;
    height: 200px;
    width: 100%;
    padding: 20px 20px;
    box-sizing: border-box;
    position: absolute;
    color: white;
    font-weight: bold;

    .btn {
      padding-top: 30px;
      box-sizing: border-box;
    }
  }
  ::v-deep .u-form-item__body {
    background: rgba(31, 142, 250, 0.2);
  }
  ::v-deep .uni-input-input {
    width: calc(100% - 6px);
    color: white !important;
    padding-left: 6px !important;
  }
  ::v-deep .u-button--primary {
    background: #409eff !important;
  }
  ::v-deep .u-line {
    display: none !important;
  }
  ::v-deep .u-input {
    padding-left: 10px !important;
  }
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    .img {
      height: 100%;
    }
  }
  .bottom-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 224px;
    width: 100vw;
    .img {
      height: 100%;
    }
  }
}
</style>
